<!DOCTYPE html>
<html>
<head>
	<title>TextSlider - 踏雕上月 Studio 猫熊设计</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="topImg">
		<div class="container backToHome">
			<a href="https://www.zsxcool.com/">踏雕上月 Studio</a><a href="https://www.zsxcool.com/" target="_blank">BUG反馈</a>
		</div>
		<div class="container">
			<div class="logoContainer col-sm-5">
				<img src="picture/logo.png" class='logoImg' />
			</div>
			<h1 class="topImgText col-sm-7">TextSlider</h1>
		</div>
	</div>
	<div class="tabMenu container">
		<a href="index.html">简介</a>
		<a class="selected" href="start.html">起步</a>
		<a href="download.html">下载</a>
	</div>
	<div class="mainStart">
		<section>
			<div class="container">
				<div class="textArea col-sm-12">
					<h2>使用方法</h2>
					<p>下载到完整的包后，解压压缩包，直接打开 index.html 文件可浏览初始的介绍文件，里面包含使用方法。该介绍文件由 content.txt 文件生成。</p>
					<ol>
						<li>开始编写：删除默认的 content.txt 文件，将 content-sample.txt 文件另存为 content.txt，使用任何的纯文本编辑器编辑它。</li>
						<li>在 content-sample.txt 文件中幻灯片标题、副标题的位置填写相应的内容。在章节部分填写章节名称，当需要新增一个章节时，需要复制章节名称及上下两行的等号。</li>
						<li>在章节名称的下面新增加一行，用 Markdown 的方式去书写内容就可以了。</li>
						<li>结束页的部分必须要有，结束页和章节名称一样，需要用上下两行等号分隔开（默认已经自动给你写上了，您只需要填写内容即可）</li>
						<li>编辑完成后打开 index.html 即可播放。</li>
					</ol>
					<br />
					<p class="orangeText">Tips：</p>
					<ul>
						<li class="orangeText">浏览器必须使用最新版本。Win7至少升级到IE10（或<a href="http://www.firefox.com.cn">点击安装Firefox</a>）。</li>
						<li class="orangeText">如果您想要实时看到您书写的效果被转换出来是什么样子，您可以一边用浏览器打开 index.html 一边编辑 content.txt 文件。当您需要查看生成的幻灯片效果时，保存正在编辑的文件，然后在浏览器中刷新一次就可以显示了。（此技巧不支持 Chromium 内核浏览器）</li>
						<li class="orangeText">欢迎加入我们的QQ群来讨论（已修复无法加群的BUG）：41757994</li>
					</ul>
				</div>
			</div>
		</section>
		<section>
			<div class="container">
				<div class="textArea col-sm-12">
					<h2>实现原理</h2>
					<p>完全采用网页前端方式实现：网页读取到内容文件，然后根据 javascript 脚本将内容生成为一个幻灯片的结构并呈现出来。TextSlider不是一个从零开始编写的解决方案，它使用到现有的技术有：</p>
					<ol>
						<li><a target="_blank" href="https://github.com/alvarotrigo/fullPage.js" style="color: #808080;">fullPage.js by Alvaro Trigo</a></li>
						<li><a target="_blank" href="https://github.com/evilstreak/markdown-js" style="color: #808080;">markdown-js by evilstreak</a></li>
						<li><a target="_blank" href="https://github.com/mjackson/shadowbox" style="color: #808080;">ShadowBox by mjackson</a></li>
						<li><a target="_blank" href="http://jquery.com" style="color: #808080;">jQuery</a></li>
					</ol>
					<p>由于 content.txt 文件在本地，浏览器去读取时会错误的判断为出现了“跨域”的安全问题，因此采用了iframe的方法去解决它，但 Chrome 浏览器仍然会认为这是一个错误。因此：双击自动播放只能支持最新版本的 IE、Edge、Safari、Firefox 浏览器。</p>
					<p class="orangeText">Chrome 及 Chromium 内核的国产浏览器需手动将 content.txt 文件拖入窗口来绕过上述BUG才能正常播放</p>
				</div>
			</div>
		</section>
		<section>
			<div class="container">
				<div class="textArea col-sm-12">
					<h2>自动分页</h2>
					<p>自动分页采用的原理是根据您所写的一级标题来分页。当您写下来类似下面的内容时，会根据内容的长短来划分：</p>
					<p># 标题XXX<br />内容xxxxxxxxxxxxxxx</p>
					<p>每次分页一定会根据标题来分页，标题下面的内容永远跟着标题走。当内容太多时，不会自动分页。因此您应该控制每个标题下面的内容数量。迫不得已时，应使用[INS]来强制分页。</p>
				</div>
			</div>
		</section>
	</div>
	<div class="bottomImg">
		<div class="container">
			<div class="tabMenu bottomTab container">
				<a href="index.html">简介</a>
				<a class="selected" href="start.html">起步</a>
				<a href="download.html">下载</a>
			</div>
		</div>
		<div class="container footer">
			版权所有 © <a href="https://www.zsxcool.com/" target="_blank">踏雕上月 Studio</a> | <a href="https://www.zsxcool.com/" target="_blank">踏雕上月</a>
		</div>
	</div>
</body>
</html>